<template>
  <a-list :bordered="false">
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            登录密码
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph>
              密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link @click="handleEditPwd">
              修改
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>

  <!--  修改密码  -->
  <a-modal ref="modalRefPwd"
           v-model:visible="modalSettingPwd.visible"
           :title="modalSettingPwd.title"
           :ok-text="modalSettingPwd.okText"
           :mask-closable="false"
           :footer="false"
           @cancel="modalCancelPwd"
  >
    <a-form ref="formRefPwd"
            :model="formDataPwd"
            :rules="formRulesPwd"
            layout="vertical"
            @submit-success="handleSubmit"
    >
      <a-form-item field="oldPassword" label="旧密码">
        <a-input-password v-model="formDataPwd.oldPassword" placeholder="请输入旧密码"/>
      </a-form-item>
      <a-form-item field="newPassword" label="新密码" tooltip="密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。">
        <a-input-password v-model="formDataPwd.newPassword" placeholder="请输入新密码"/>
      </a-form-item>
      <a-form-item field="confirmPassword" label="确认密码">
        <a-input-password v-model="formDataPwd.confirmPassword" placeholder="请再次输入新密码"/>
      </a-form-item>
      <a-form-item hide-label>
        <a-button type="primary" html-type="submit" :loading="modalSettingPwd.loading" long>
          确定修改
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {editPwd, EditPwdParams} from "@/api/user/user.ts";
import {Message} from "@arco-design/web-vue";
import {useRouter} from "vue-router";
import {useUserStore} from "@/store";

const router = useRouter();
const userStore = useUserStore();

const formRulesPwd = {
  oldPassword: [
    {
      required: true,
      message:'新密码不能为空',
    },
  ],
  newPassword: [
    {
      required: true,
      message:'新密码不能为空',
    },
    {
      validator: (value, cb) => {
        const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/;
        if (!regex.test(value)) {
          cb("新密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母");
        }
      }
    }
  ],
  confirmPassword: [
    {
      required: true,
      message:'确认密码不能为空',
    },
    {
      validator: (value, cb) => {
        const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/;
        if (!regex.test(value)) {
          cb("确认密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母");
        } else {
          if (value !== formDataPwd.value.newPassword) {
            cb('两次密码输入不一致')
          } else {
            cb()
          }
        }
      }
    }
  ],
}

const formRefPwd = ref();
const formDataPwd = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const resetFormDataPwd = () => {
  formRefPwd.value.resetFields();
  formRefPwd.value.clearValidate();
}

const modalRefPwd = ref();
const modalSettingPwd = ref({
  visible: false,
  loading: false,
  title: '修改密码',
  okText: '确定',
});

const handleEditPwd = () => {
  resetFormDataPwd();
  modalSettingPwd.value.visible = true;
  modalSettingPwd.value.loading = false;
}

const modalCancelPwd = () => {
  resetFormDataPwd();
  modalSettingPwd.value.visible = false;
  modalSettingPwd.value.loading = false;
}

const handleSubmit = async () => {
  modalSettingPwd.value.loading = true;
  try {
    const params: EditPwdParams = {
      oldPassword: formDataPwd.value.oldPassword,
      newPassword: formDataPwd.value.newPassword,
    }
    const {code} = await editPwd(params);
    if (code === 200) {
      Message.success({
        content: '修改成功',
        duration: 2 * 1000,
      });
      resetFormDataPwd();
      modalSettingPwd.value.visible = false;
      // 退出登录
      await userStore.logout();
      userStore.updateSettings();
      await router.push('Home');
    }
  } catch (e) {
    console.log(e)
  } finally {
    modalSettingPwd.value.loading = false;
  }
}
</script>

<style scoped lang="less">
  :deep(.arco-list-item) {
    border-bottom: none !important;
    .arco-typography {
      margin-bottom: 20px;
    }
    .arco-list-item-meta-avatar {
      margin-bottom: 1px;
    }
    .arco-list-item-meta {
      padding: 0;
    }
  }
  :deep(.arco-list-item-meta-content) {
    flex: 1;
    border-bottom: 1px solid var(--color-neutral-3);

    .arco-list-item-meta-description {
      display: flex;
      flex-flow: row;
      justify-content: space-between;

      .tip {
        color: rgb(var(--gray-6));
      }
      .operation {
        margin-right: 6px;
      }
    }
  }
</style>
